<template>
	<div class="tab-chart">
		<div class="tab-chart__header">
			<ul class="tab-chart__tab">
				<li class="active">近半月收益情况</li>
			</ul>
			<!-- <span class="tab-chart__year">
				<el-date-picker
					v-model="timerValue"
					type="daterange"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					clearable
					@change="timeChange"
				></el-date-picker>
			</span> -->
		</div>

		<div class="tab-chart__container">
			<ECharts :option="chartOption" autoresize />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import ECharts from "vue-echarts";

import { useCool } from "/@/cool";
const { service } = useCool();

const barWidth = 15;

let timerValue = ref([]);

const chartOption = reactive<any>({
	dataZoom: [
		{
			// 设置滚动条的隐藏与显示
			show: true,
			// 设置滚动条类型
			type: "slider",
			// 设置背景颜色
			// backgroundColor: "rgb(19, 63, 100)",
			// // 设置选中范围的填充颜色
			// fillerColor: "rgb(16, 171, 198)",
			// // 设置边框颜色
			// borderColor: "rgb(19, 63, 100)",
			// 是否显示detail，即拖拽时候显示详细数值信息
			showDetail: false,
			// 数据窗口范围的起始数值
			startValue: 0,
			// 数据窗口范围的结束数值（一页显示多少条数据）
			endValue: 15,
			// empty：当前数据窗口外的数据，被设置为空。
			// 即不会影响其他轴的数据范围
			filterMode: "empty",
			// 设置滚动条宽度，相对于盒子宽度
			width: "50%",
			// 设置滚动条高度
			height: 8,
			// 设置滚动条显示位置
			left: "center",
			// 是否锁定选择区域（或叫做数据窗口）的大小
			zoomLoxk: true,
			// 控制手柄的尺寸
			handleSize: 0,
			// dataZoom-slider组件离容器下侧的距离
			bottom: 30
		},
		{
			// 没有下面这块的话，只能拖动滚动条，
			// 鼠标滚轮在区域内不能控制外部滚动条
			type: "inside",
			// 滚轮是否触发缩放
			zoomOnMouseWheel: false,
			// 鼠标滚轮触发滚动
			moveOnMouseMove: true,
			moveOnMouseWheel: true
		}
	],
	grid: {
		top: "50px",
		bottom: "50px",
		right: "10px",
		left: "80px",
		containLabel: true
	},
	xAxis: {
		type: "category",
		data: [],
		offset: 0,
		min: "20", // 可以是具体数值，或者是 'dataMin' 来自动取得数据最小值
		max: "100", // 可以是具体数值，或者是 'dataM
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		}
	},
	yAxis: {
		type: "value",
		offset: 20,
		splitLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLine: {
			show: false
		}
	},
	tooltip: {
		trigger: "axis",
		formatter: (comp: any) => {
			const [serie] = comp;
			return `${serie.seriesName}：${serie.value}`;
		},
		axisPointer: {
			show: true,
			status: "shadow",
			z: -1,
			type: "shadow"
		},
		extraCssText: "width:120px; white-space:pre-wrap"
	},
	series: [
		{
			barWidth,
			name: "当日金额",
			type: "line",
			data: [],
			itemStyle: {
				color: "#4165d7"
			}
		}
		// {
		// 	type: "line",
		// 	barWidth,
		// 	xAxisIndex: 0,
		// 	barGap: "-100%",
		// 	data: [],
		// 	itemStyle: {
		// 		color: "#f1f1f9"
		// 	},
		// 	zlevel: -1
		// }
	]
});

chartOption.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
chartOption.series[0].data = new Array(12).fill(1).map(() => parseInt(String(Math.random() * 100)));
// chartOption.series[1].data = new Array(12).fill(100);

const getTotalSalesVolume = async () => {
	let params = {
		startTime: "",
		endTime: ""
	};
	if (timerValue.value) {
		(params.startTime = timerValue.value[0]), (params.endTime = timerValue.value[1]);
	}
	let data = await service.member.info.priceCountWeek(params);
	console.log(data, "data");
	chartOption.xAxis.data = data.map((o) => o.timer);
	chartOption.series[0].data = data.map((o) => o.count);
};

const timeChange = (ev) => {
	console.log(timerValue);
	getTotalSalesVolume();
};

onMounted(() => {
	getTotalSalesVolume();
});
</script>

<style lang="scss" scoped>
.tab-chart {
	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		padding: 0 20px;

		ul {
			li {
				list-style: none;
				float: left;
				margin-right: 20px;
				font-size: 15px;
				color: #dbdbdb;
				cursor: pointer;

				&.active {
					color: #000;
					font-weight: bold;
				}
			}
		}
	}

	&__year {
		font-size: 14px;
		position: relative;

		&::before {
			// display: block;
			// content: "";
			// height: 8px;
			// width: 8px;
			// border-radius: 8px;
			// background-color: #000;
			// position: absolute;
			// left: -15px;
			// top: 4px;
		}
	}

	&__container {
		height: 300px;
		padding: 0 15px;

		.echarts {
			height: 100%;
			width: 100%;
		}
	}
}
</style>
